<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>订单实时处理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .chart-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }

        .chart {
            width: 60%;
            height: 400px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        @media (max-width: 768px) {
            .chart-container {
                flex-direction: column;
            }

            .chart {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<h1>订单实时处理系统</h1>

<div class="chart-container">
    <div class="chart" id="validInvalidChart"></div>
</div>

<div class="chart-container">
    <div class="chart" id="productOrderStatsChart"></div>
</div>

<div class="chart-container">
    <div class="chart" id="categoryOrderCountsChart"></div>
</div>

<div class="chart-container">
    <div class="chart" id="categoryProductOrderStatsChart"></div>
</div>
<div class="chart-container">
    <div class="chart" id="categoryProductPieChart"></div>
</div>

<script>
    var validInvalidChart = echarts.init(document.getElementById('validInvalidChart'));
    var productOrderStatsChart = echarts.init(document.getElementById('productOrderStatsChart'));
    var categoryOrderCountsChart = echarts.init(document.getElementById('categoryOrderCountsChart'));
    var categoryProductOrderStatsChart = echarts.init(document.getElementById('categoryProductOrderStatsChart'));
    var categoryProductPieChart = echarts.init(document.getElementById('categoryProductPieChart'));

    function fetchData() {
        fetch('/get_all_stats')
            .then(response => response.json())
            .then(data => {
                updateValidInvalidChart(data);
                updateProductOrderStatsChart(data);
                updateCategoryOrderCountsChart(data);
                updateCategoryProductOrderStatsChart(data);
                updateCategoryProductPieChart(data);
            })
            .catch(error => console.error('Error fetching data:', error));
    }

    function updateValidInvalidChart(data) {
        validInvalidChart.setOption({
            title: {text: '有效和无效订单总数'},
            tooltip: {},
            legend: {
                data: ['Valid', 'Invalid'],
                bottom: 10
            },
            xAxis: {
                data: ["有效", "无效"],
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    color: '#333'
                }
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    color: '#333'
                }
            },
            series: [{
                name: '订单',
                type: 'bar',
                data: [data.valid_count, data.invalid_count],
                itemStyle: {
                    color: '#FF69B4'
                }
            }]
        });
    }

    function updateProductOrderStatsChart(data) {
        var productData = [];
        for (var productName in data.product_valid_invalid_counts) {
            productData.push({
                name: productName,
                valid: data.product_valid_invalid_counts[productName]['Valid'],
                invalid: data.product_valid_invalid_counts[productName]['Invalid']
            });
        }

        productOrderStatsChart.setOption({
            title: {
                text: '每个订单的有效和无效数量'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: ['Valid', 'Invalid', 'Total'],
                top: 'bottom'
            },
            xAxis: {
                type: 'category',
                data: productData.map(item => item.name),
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    fontSize: 10,
                    color: '#333',
                    rotate: 45,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    color: '#333'
                }
            },
            series: [
                {
                    name: '有效',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#4CAF50'
                    },
                    data: productData.map(item => item.valid)
                },
                {
                    name: '无效',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#F44336'
                    },
                    data: productData.map(item => item.invalid)
                },
                {
                    name: '总订单',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'bottom',
                        color: '#333'
                    },
                    data: productData.map(item => item.valid + item.invalid)
                }
            ]
        });
    }

    function updateCategoryOrderCountsChart(data) {
        var categories = Object.keys(data.category_counts);
        var counts = categories.map(category => data.category_counts[category]);
        categoryOrderCountsChart.setOption({
            title: {text: '所有订单类别的数量'},
            tooltip: {},
            legend: {
                data: ['类别'],
                bottom: 10
            },
            xAxis: {
                data: categories,
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    fontSize: 5,
                    color: '#333'
                }
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    color: '#333'
                }
            },
            series: [{
                name: '订单',
                type: 'bar',
                data: counts,
                itemStyle: {
                    color: '#2196F3'
                }
            }]
        });
    }

    function updateCategoryProductOrderStatsChart(data) {
        var categoryProductData = [];
        for (var category in data.category_product_valid_invalid_counts) {
            for (var productName in data.category_product_valid_invalid_counts[category]) {
                categoryProductData.push({
                    name: `${category} - ${productName}`,
                    valid: data.category_product_valid_invalid_counts[category][productName]['Valid'],
                    invalid: data.category_product_valid_invalid_counts[category][productName]['Invalid']
                });
            }
        }

        categoryProductOrderStatsChart.setOption({
            title: {
                text: '每个订单类别的有效和无效数量'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: ['Valid', 'Invalid', 'Total'],
                top: 'bottom'
            },
            xAxis: {
                type: 'category',
                data: categoryProductData.map(item => item.name),
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    fontSize: 10,
                    color: '#333',
                    rotate: 45,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    color: '#333'
                }
            },
            series: [
                {
                    name: '有效',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#4CAF50'
                    },
                    data: categoryProductData.map(item => item.valid)
                },
                {
                    name: '无效',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#F44336'
                    },
                    data: categoryProductData.map(item => item.invalid)
                },
                {
                    name: '总订单',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'bottom',
                        color: '#333'
                    },
                    data: categoryProductData.map(item => item.valid + item.invalid)
                }
            ]
        });
    }

    function updateCategoryProductPieChart(data) {
        var pieData = [];
        for (var category in data.category_product_valid_invalid_counts) {
            var totalValid = 0;
            var totalInvalid = 0;
            for (var productName in data.category_product_valid_invalid_counts[category]) {
                totalValid += data.category_product_valid_invalid_counts[category][productName]['Valid'];
                totalInvalid += data.category_product_valid_invalid_counts[category][productName]['Invalid'];
            }
            pieData.push({value: totalValid, name: `${category} Valid`});
            pieData.push({value: totalInvalid, name: `${category} Invalid`});
        }
        categoryProductPieChart.setOption({
            title: {text: '每个订单的各个类别的Valid和Invalid数量'},
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                name: '订单',
                type: 'pie',
                radius: '50%',
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    formatter: '{b}: {c}'
                }
            }]
        });
    }

    // Fetch initial data and set interval to update every 2 seconds
    fetchData();
    setInterval(fetchData, 2000);
</script>
</body>
</html>